<script setup></script>

<template>
  <!-- 纵向菜单（默认占满父容器高度，可设置 height 固定） -->
  <el-menu
    mode="vertical"
    background-color="#304156"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="width: 230px; height: 100vh"
  >
    <!-- 普通菜单项 -->
    <el-menu-item index="1">
      <el-icon><HomeFilled /></el-icon>
      <!-- 结合图标（需导入） -->
      <span>首页</span>
    </el-menu-item>

    <!-- 带子菜单的项 -->
    <el-sub-menu index="2">
      <template #title>
        <!-- 子菜单标题 -->
        <el-icon><Menu /></el-icon>
        <span>产品中心</span>
      </template>
      <!-- 子菜单项 -->
      <el-menu-item index="2-1">产品1</el-menu-item>
      <el-menu-item index="2-2">产品2</el-menu-item>
      <el-menu-item index="2-3">产品3</el-menu-item>
    </el-sub-menu>

    <el-menu-item index="3">
      <el-icon><Setting /></el-icon>
      <span>设置</span>
    </el-menu-item>
  </el-menu>
</template>

<style scoped></style>
